import React, { PureComponent } from 'react';
import { connect } from 'dva';
import DocumentTitle from 'react-document-title';
import { formatMessage } from 'umi/locale';
import SelectLang from '@/components/SelectLang';
import SelectWallPaper from '@/components/SelectWallPaper';
import Footer from '@/components/Login/Footer';
import { SITE_NAME } from '@/setting';


import styles from './index.less';

class Login extends PureComponent {

  changeWallPaper = ({ key }) => {
    const {
      dispatch,
    } = this.props;
    dispatch({
      type: 'login/changeWallPaper',
      payload: key
    });
  }
  getLoginTitle = () => {
    const pageName = formatMessage({
      id: 'signin.title',
      defaultMessage: 'Sign in',
    });
    return `${pageName} - ${SITE_NAME}`;
  }
  render () {
    const { default_wallpaper, wallpapers } = this.props;
    const wallpaper = require('@/assets/background/' + default_wallpaper + '.jpg');
    return (
      <DocumentTitle title={this.getLoginTitle()}>
        <div
          className={styles.container}
          style={{ backgroundImage: "url(" + wallpaper + ")" }}
        >
          <div className={styles.lang}>
            <SelectWallPaper
              default_wallpaper={default_wallpaper}
              wallpapers={wallpapers}
              changeWallPaper={this.changeWallPaper}
            />
            <SelectLang />
          </div>
          {this.props.children}
          <Footer />
        </div>
      </DocumentTitle>
    )
  }
}

const mapStateToProps = ({ login }) => {
  return {
    default_wallpaper: login.default_wallpaper,
    wallpapers: login.wallpapers
  }
}

export default connect(mapStateToProps)(Login)